import styled from 'styled-components'
import Icon from '@/components/Icon'

export const IconCheckbox = styled(Icon)`
	width: 12px;
	height: 12px;
	background-position: -3px -1672px;
	&:hover {
		background-position: -237px -1672px;
	}
`
export const IconAvatarTip = styled(Icon)`
	width: 11px;
	height: 11px;
	background-position: 0 -1767px;
`
export const IconTreeRightArrow = styled(Icon)`
	width: 12px;
	height: 12px;
	background-position: -56px -1085px;
`
export const IconTreeDownArrow = styled(Icon)`
	width: 12px;
	height: 12px;
	background-position: 0px -1085px;
`
//加号
export const IconAdd = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -120px -365px;
	&:hover {
		background-position: -150px -365px;
	}
	&:active {
		background-position: -180px -365px;
	}
`
//级联树展开合上
export const IconSwitch = styled(Icon)<{ isOpen: boolean }>`
	width: 14px;
	height: 14px;
	background-position: ${({ isOpen }) => (isOpen ? `0px -1084px` : ` -56px -1084px`)};
`
//白色向左箭头
export const IconLeftWhite = styled(Icon)`
	background-position: -406px -854px;
	width: 16px;
	height: 16px;
`
export const IconVideoCallBlue = styled(Icon)`
	background-position: -16px -854px;
	width: 19px;
	height: 16px;
`
export const IconAudioCallBlue = styled(Icon)`
	background-position: -153px -854px;
	width: 16px;
	height: 16px;
`
export const IconPhoneCallBlue = styled(Icon)`
	background-position: -84px -854px;
	width: 16px;
	height: 16px;
`
export const IconVideoCallBlack = styled(Icon)`
	background-position: 2px -854px;
	width: 19px;
	height: 16px;
	&:hover {
		background-position: -16px -854px;
	}
`
export const IconAudioCallBlack = styled(Icon)`
	background-position: -137px -854px;
	width: 16px;
	height: 16px;
	&:hover {
		background-position: -153px -854px;
	}
`
export const IconPhoneCallBlack = styled(Icon)`
	background-position: -68px -854px;
	width: 16px;
	height: 16px;
	&:hover {
		background-position: -85px -854px;
	}
`
//info icon
export const IconInfo = styled(Icon)`
	background-position: -0px -558px;
	height: 21px;
	margin-right: 10px;
	width: 20px;
`
//绿底 打钩
export const IconGreenBGSelect = styled(Icon)`
	background-position: 0px -2567px;
	height: 14px;
	width: 14px;
`
//白底 打钩
export const IconWhiteBGSelect = styled(Icon)`
	background-position: -14px -2567px;
	height: 14px;
	width: 14px;
`
// 五角星
export const IconStar = styled(Icon)<{ flag: boolean }>`
	background-position: ${({ flag }) => (flag ? `-338px -249px;` : `-273px -249px;`)};
	height: 13px;
	width: 13px;
	margin-right: 8px;
`
//白色向左 邀请终端more opt
export const IconBigRightWhite = styled(Icon)`
	height: 24px;
	width: 24px;
	background-position: -192px -939px;
`
//白色向右 邀请终端more opt
export const IconBigLeftWhite = styled(Icon)`
	height: 24px;
	width: 24px;
	background-position: -96px -939px;
`
export const IconHelper = styled.span`
	width: 23px;
	height: 23px;
	cursor: pointer;
	background: url()
		no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	:hover {
		background-position: -23px 0;
	}
`
export const IconToRightAll = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -240px -365px;
	&:hover {
		background-position: -270px -365px;
	}
`
export const IconToRight = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: 0 -395px;
	&:hover {
		background-position: -30px -395px;
	}
`
export const IconToLeftAll = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -240px -395px;
	&:hover {
		background-position: -270px -395px;
	}
`
export const IconToLeft = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -120px -395px;
	&:hover {
		background-position: -150px -395px;
	}
`
